<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客</title>
    <link rel="shortcut icon" href="./images/cherrytree.ico" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="./lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQueryUI css -->
    <link rel="stylesheet" href="./lib/jquery-ui/jquery-ui.css">
    <!-- wow动画插件 -->
    <link rel="stylesheet" href="./lib/wow/animate.css">
    <!-- 字体图标库 -->
    <link rel="stylesheet" href="./font/flaticon/font/flaticon.css">
    <!-- 载入自定义的css -->
    <link rel="stylesheet" href="./css/blog.css">
    <!-- 导航固定动画 -->
    <link rel="stylesheet" href="./css/animate.css">

</head>

<body>
    <!-- 导航条 -->
    <nav class="navbar  navbar-inverse  navbar-light" id='nav'>
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header navColor">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"
                    aria-expanded="false">
                    <span class="glyphicon glyphicon-menu-hamburger"><span class="">菜单</span></span>
                </button>
                <a class="navbar-brand " href="#">
                    <img class="wow hinge" data-wow-delay="1s" src="./images/travel.png" style="width: 40px;height: 40px;">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <!-- 导航条右边 -->
                <ul class="nav navbar-nav navbar-right navColor">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./about.html">关于</a></li>
                    <li><a href="./place.html">地方</a></li>
                    <li><a href="./hotel.html">酒店</a></li>
                    <li><a href="./blog.html" class="activeA">博客</a></li>
                    <li><a href="./contact.html">联系</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

    <!-- 头部 -->
    <div class="hero-wrap">
        <!-- <div class="overlay"></div> -->
        <div class="container">
            <div class="title wow lightSpeedIn">
                <h1 style='text-align: center; padding-top: 100px ;'>博&nbsp;客</h1>

            </div>
        </div>
    </div>

    <!--section-11 提示和文章 -->
    <section id='section-11' class="wow bounceInUp">
        <h2 class="wow wobble" data-wow-delay="1s">提示和文章</h2>
        <div class="container wow lightSpeedIn" data-wow-delay="0.5s">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_1.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_2.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_3.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_4.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_5.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="content-wrap">
                        <img src="./images/image_6.jpg" alt="">
                        <div class="content-list">
                            <h3>
                                菲律宾最好的8家寄宿家庭，您不容错过
                            </h3>

                            <p class="p1">
                                2018年10月3日 管理员
                                <span class="glyphicon glyphicon-list-alt"></span>
                                3
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 路径导航 -->
            <div class="row">
                <div class="col-sm-offset-2 col-md-offset-4">
                    <div class="content-wrap">
                        <nav class="navpage" aria-label="Page navigation ">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--section-12 邮件 -->
    <section id='section-12' class="wow bounceInUp">
        <div class="container">
            <div class="row">
                <div class=" col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="content-wrap">
                        <h2>订阅我们的时事通讯</h2>
                        <p>遥远的地方，远离Vokalia和Consonantia等国家的山脉背后，有盲文。他们分居住了</p>
                        <form action="#">
                            <input type="text" placeholder="请输入邮箱" />
                            <input type="submit" value="提交" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--footer 底部 -->
    <footer id='footer'>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="content-wrap">
                        <h2>冒险</h2>
                        <ul>
                            <li>
                                遥远的地方，远离Vokalia和Consonantia等国家的山脉背后，有盲文。
                            </li>
                            <li>
                                <span class="title glyphicon glyphicon-phone-alt wow rollIn"></span>
                                <span class="title glyphicon glyphicon-envelope wow rollIn"></span>
                                <span class="title glyphicon glyphicon-user wow rollIn"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="content-wrap">
                        <h2>信息</h2>
                        <ul>
                            <li><a href="javascript:;">关于我们</a></li>
                            <li><a href="javascript:;">在线咨询</a></li>
                            <li><a href="javascript:;">打电话给我们</a></li>
                            <li><a href="javascript:;">通用查询</a></li>
                            <li><a href="javascript:;">预订条件</a></li>
                            <li><a href="javascript:;">隐私和政策</a></li>
                            <li><a href="javascript:;">退款政策</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="content-wrap">
                        <h2>经验</h2>
                        <ul>
                            <li><a href="javascript:;"> 海滩</a></li>
                            <li><a href="javascript:;">冒险</a></li>
                            <li><a href="javascript:;">野生动物</a></li>
                            <li><a href="javascript:;">度蜜月</a></li>
                            <li><a href="javascript:;">性质</a></li>
                            <li><a href="javascript:;">派对</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="content-wrap">
                        <h2>有问题吗？</h2>
                        <ul>
                            <li>
                                <span class=" glyphicon glyphicon-map-marker"></span>
                                <a href="javascript:;">
                                    203假圣山景，旧金山，加利福尼亚州，美国</a></li>
                            <li>
                                <span class="glyphicon glyphicon-phone-alt"></span>
                                <a href="javascript:;">+2 392 3929 210</a></li>
                            <li>
                                <span class="glyphicon glyphicon-envelope"></span>
                                <a href="javascript:;">info@yourdomain.com</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <!-- 版权 -->
                <div class=" copy ">
                    <div class="content-wrap">
                        <p style="text-align: center; margin: 20px 0">
                            网页版权所有者<span class="glyphicon glyphicon-heart-empty wow pulse" data-wow-iteration="infinite"
                                style="color: red; "></span>微米前端
                        </p>
                        <p style="text-align: center;">
                            <span class="glyphicon glyphicon-envelope"></span> github账号：<a href="https://github.com/WTxiaomage">https://github.com/WTxiaomage</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./lib/jquery/jquery-1.12.3.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- 引入jQueryUI js -->
    <script src="./lib/jquery-ui/jquery-ui.js"></script>
    <!--引入jQuery validate -->
    <script src="./lib/jquery.validate/jquery.validate.js"></script>
    <!-- wow js -->
    <script src="./lib/wow/wow.min.js"></script>
    <!-- 自定义动画js -->
    <script src="./js/index.js"></script>
    <!-- 插件开启js -->
    <script src="./js/plugin-config.js"></script>

    <script>
        var wow = new WOW()
        wow.init()
    </script>
</body>

</html>